<template>
    <div class="profession">
        <div class="header flexbetween" style="margin-bottom: 20px">
            <el-input placeholder="请输入关键字搜索" v-model="searchInput" @keyup.enter.native="getSynonymList" size="small" style="width: 300px">
                <span slot="suffix" class="iconfont icon-sousuo" @click="getSynonymList"></span>
            </el-input>
            <div class="iconBtn">
                <el-tooltip effect="light" content="添加" placement="top" :enterable="false" v-if="menuAuthCodes.includes('M150')">
                    <span class="iconfont icon-tianjia" @click="addOpen"></span>
                </el-tooltip>
            </div>
        </div>

        <element-table :data="thsList" :columns="cloumns" :loading="tableLoading" :tableHeight="tableHeight" :pageNo="pageNo"
                       :pageSize="pageSize" :total="total" @changePageNo="changePageNo" @changePageSize="changePageSize">
        </element-table>

        <el-dialog :title="setTitle" :visible="setVisible" width="640px" :before-close="beforeClose" class="setDialog">
            <el-form label-width="120px" :model="thesaurusForm" :rules="thesRules" ref="thesaurusForm">
                <el-form-item label="词语:" prop="word">
                    <el-input size="small" v-model="thesaurusForm.word" maxlength="50" />
                </el-form-item>
                <div v-for="(item,index) in thesaurusForm.synonymList" :key="index" class="qsContList">
                    <el-form-item :label="index == 0 ? '同义词:' : ''" :prop="`synonymList.${index}.synonym`" :rules="thesRules.synonym"
                                  :class="{'qsCopy' : index != 0}">
                        <el-input size="small" v-model="item.synonym" placeholder="输入需要添加的同义词" maxlength="50" />
                        <span class="iconfont icon-tianjia" @click="addOneSynonym" v-if="index == 0"></span>
                        <span class="iconfont icon-fuzhi" @click="copyOneSynonym(index)" v-if="index != 0"></span>
                        <span class="iconfont icon-shanchu" @click="delOneSynonym(index)" v-if="index != 0"></span>
                    </el-form-item>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="beforeClose" size="small" type="text">取 消</el-button>
                <el-button type="primary" size="small" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import elementTable from "@/components/elementTable";
import { synonymListMethod, addSynonym, editSynonym, delSynonym } from "@/api/thesaurus.js";
export default {
    name: "profession",
    data() {
        var validateSynonym = (rule, value, callback) => {
            value = value.trim();
            if (value == '') {
                callback(new Error('请输入同义词'));
            } else {
                callback();
            }
        };
        return {
            searchInput: "",
            thsList: [],
            tableLoading: false,
            pageNo: 1,
            pageSize: 10,
            total: 0,
            cloumns: [{
                config: {
                    label: "词语",
                    prop: "word"
                },
            },
            {
                config: {
                    label: "同义词",
                    prop: "synonym"
                },
            },
            {
                config: {
                    label: "创建时间",
                    prop: "addTime"
                },
            },
            {
                config: {
                    label: "最后更新时间",
                    prop: "updateTime"
                },
            },
            {
                config: {
                    label: "操作",
                    width: "100"
                },
                render: (h, scope) => {
                    return (
                        <div class="operation">
                            <el-tooltip effect="light" content="编辑" placement="top" enterable={false}
                                v-show={this.menuAuthCodes.includes('M151')}>
                                <span class="iconfont icon-bianjidaan" onClick={() => this.editOpen(scope)}></span>
                            </el-tooltip>
                            <el-tooltip effect="light" content="删除" placement="top" enterable={false}
                                v-show={this.menuAuthCodes.includes('M152')}>
                                <span class="iconfont icon-shanchu" onClick={() => this.delThesList(scope.id)}></span>
                            </el-tooltip>
                        </div>
                    );
                },
            }
            ],
            editType: "add",
            editId: "",
            setVisible: false,
            thesaurusForm: {
                word: "",
                synonymList: [{ synonym: "" }]
            },
            thesRules: {
                word: [{ required: true, message: '请输入词语', trigger: "blur" }],
                synonym: [{ required: true, validator: validateSynonym, trigger: "blur" }]
            },
        }
    },
    created() {
        this.getSynonymList();
    },
    methods: {
        getSynonymList() {
            if (!this.menuAuthCodes.includes("M149")) {
                return;
            }
            this.tableLoading = true;
            // 获取词库列表
            var param = {
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                keyword: this.searchInput
            }
            synonymListMethod(param).then(resp => {
                this.tableLoading = false;
                if (resp.status == 0) {
                    var data = resp.data;
                    this.thsList = data.list || [];
                    this.total = data.total;
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        },
        addOpen() {
            // 添加的弹窗
            this.editType = "add";
            this.setVisible = true;
        },
        editOpen(data) {
            if (!this.menuAuthCodes.includes("M151")) {
                return;
            }
            // 编辑的弹窗
            this.thesaurusForm.synonymList = [];
            var synonymList = data.synonym.split(",");
            synonymList.forEach(item => {
                this.thesaurusForm.synonymList.push({ synonym: item });
            });
            this.editId = data.id;
            this.thesaurusForm.word = data.word;
            this.editType = "edit";
            this.setVisible = true;
        },
        submit() {
            // 提交编辑、新增
            this.$refs.thesaurusForm.validate((valid) => {
                if (valid) {
                    var synonymList = [];
                    this.thesaurusForm.synonymList.forEach(item => { synonymList.push(item.synonym) });
                    let param = {
                        word: this.thesaurusForm.word,
                        synonym: synonymList.join(",")
                    }
                    if (this.editType == "add") {
                        addSynonym(param).then(resp => {
                            if (resp.status == 0) {
                                this.$antMessage.success("添加成功");
                                this.getSynonymList();
                                this.beforeClose();
                            } else {
                                this.$antMessage.warning(resp.message);
                            }
                        });
                    } else {
                        param.id = this.editId;
                        editSynonym(param).then(resp => {
                            if (resp.status == 0) {
                                this.$antMessage.success("编辑成功");
                                this.getSynonymList();
                                this.beforeClose();
                            } else {
                                this.$antMessage.warning(resp.message);
                            }
                        });
                    }
                }
            });
        },
        delThesList(id) {
            if (!this.menuAuthCodes.includes("M152")) {
                return;
            }
            // 删除一个词
            this.$confirm("是否确定删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                delSynonym({
                    ids: id
                }).then((resp) => {
                    if (resp.status == 0) {
                        this.$antMessage.success("删除成功");
                        this.getSynonymList();
                    } else {
                        this.$antMessage.warning(resp.message);
                    }
                });
            }).catch();
        },
        addOneSynonym() {
            // 添加同义词
            this.thesaurusForm.synonymList.push({ synonym: "" });
        },
        copyOneSynonym(index) {
            var copy = { ...this.thesaurusForm.synonymList[index] };
            this.thesaurusForm.synonymList.push(copy);
        },
        delOneSynonym(index) {
            this.thesaurusForm.synonymList.splice(index, 1);
        },
        changePageSize(val) {
            this.pageSize = val;
            this.getSynonymList();
        },
        changePageNo(val) {
            this.pageNo = val;
            this.getSynonymList();
        },
        beforeClose() {
            this.setVisible = false;
            this.thesaurusForm = {
                word: "",
                synonymList: [{ synonym: "" }]
            };
            this.$refs.thesaurusForm.resetFields();
        }
    },
    computed: {
        setTitle() {
            return this.editType == "add" ? "添加专业名词" : "编辑专业名词";
        },
        tableHeight() {
            return document.body.clientHeight - 310;
        },
    },
    components: {
        elementTable
    }
}
</script>

<style lang="scss">
.profession {
    .setDialog {
        .el-form-item__content {
            display: flex;
            align-items: center;
            .el-input {
                width: 400px;
            }
        }
        .qsContList {
            margin-bottom: 20px;
            .iconfont {
                height: 34px;
                font-size: 24px;
                line-height: 26px;
                color: #b7c1c9;
                background: #f5f7fa;
                border-radius: 6px;
                padding: 5px;
                cursor: pointer;
                margin-left: 20px;
                &:hover {
                    background: #eaeef4;
                    color: #abb4bc;
                }
            }
            .qsCopy {
                .el-form-item__content .el-input {
                    width: 345px;
                }
            }
        }
    }
}
</style>